<template>
    <transition name="el-fade-in-linear">
        <div id="background">
            <div id="card">
                <el-card class="box-card">
                    <div id="form">    
                        <el-input v-model="username" placeholder="账号"></el-input>
                        <el-input placeholder="密码" v-model="password" show-password></el-input>
                        <el-input placeholder="确认密码" v-model="password_confirm" show-password></el-input>
                        <div>
                            <el-button type="success" id="button_a" @click="regist">注册</el-button>
                            <el-button type="info" id="button_b" @click="reset">返回</el-button>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </transition>
</template>

<script>
import axios from "axios";
import 'element-ui/lib/theme-chalk/base.css';

export default {
    data () {
        return {
            username:"",
            password:"",
            password_confirm:"",
        }
    },
    methods: {
        reset:function(){
            this.$router.push("/")
        },
        
        regist:function(){
            if(this.username==""||this.password==""){
                this.$message.error('账号密码不能为空');
                return;
            }
            if(this.password != this.password_confirm){
                this.$message.error('两次输入密码不一致');
                return;
            }
            axios.post(this.url + "/user",{
                username:this.username,
                password:this.password
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success('注册成功');
                    this.$router.replace({
                        path:"/login"
                    })
                }else{
                    this.$message.error(res.data.msg)
                }
            }).catch(() => {
                this.$message.error('未知原因注册失败')
            });
        }
    },
    mounted () {
        
    }
}
</script>

<style scoped>
    #background{
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0%;
        background: linear-gradient(to bottom right, rgb(227, 3, 247), rgb(143, 11, 238));
    }

    #card{
        position: absolute;
        left: 35%;
        top: 25%;
    }

    .el-card{
        width: 373px;
        height: 360px;
        background-color: rgb(255,255,255);
        border-radius: 15px;
    }

    #form{
        line-height: 80px;
    }

    #button_a{
        position: absolute;
        left: 20%;
        top: 80%;
    }

    #button_b{
        position: absolute;
        right: 20%;
        top: 80%;
    }
</style>